<template>
  <el-color-picker
    v-model="theme"
    class="theme-picker"
    :predefine="themeColor"
    popper-class="theme-picker-dropdown"
  />
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/stores/setting"
// 预设可选颜色
const themeColor = [
  "#409EFF",
  "#1890ff",
  "#304156",
  "#212121",
  "#11a983",
  "#13c2c2",
  "#6959CD",
  "#f5222d"
]
// 使用 store 获取默认主题色
const store = useSettingsStore()
const theme = ref(store.settings.theme)

// 监听主题色变化同步 store
watch(theme, (newValue) => {
  store.changeSetting({ key: "theme", value: newValue })
})
</script>
